<template>
  <div>
    <form>
      <label>姓名：</label>
      <input type="text" v-model="uname" /><br /><br />

      <label>年龄：</label>
      <input type="number" v-model="age" /><br /><br />

      <label>身高：</label>
      <input type="number" v-model="height" />(米)<br /><br />

      <label>体重：</label>
      <input type="number" v-model="weight" />(公斤)<br /><br />

      <label>病史：</label> 
      <input type="text" /><br /><br />

      <button @click.prevent="diagnose">诊断</button>
    </form>

    <p v-show="show">患者 {{ name }} 的诊断结果：{{ disease }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      age: "",
      height: "",
      weight: "",
      show: false,
      name: "",
      disease: "",
    };
  },
  methods: {
    diagnose() {
      this.name = this.uname;
      this.show = true;
      console.log(this.weight / this.height / this.height);
      if (this.weight / this.height / this.height > 24) {
        return (this.disease = "不健康");
      } else if (this.weight / this.height / this.height < 18) {
        return (this.disease = "不健康");
      } else {
        return (this.disease = "健康");
      }
    },
  },
};
</script>
